<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>苹果{{ price }}元/斤，折扣&lt;{{ discount }}&gt;折/></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            请输入你要购买的斤数 <input type="number" v-model.number="amount" />
          </td>
        </tr>
        <tr>
          <td><button @click="checkout">结账买单~</button></td>
        </tr>
        <tr>
          <td>
            结账单：总价{{ total }}元 折后价{{ actual }}元 省了{{ save }}元
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      amount: 0,
      total: 0,
      actual: 0,
      save: 0,
    };
  },
  methods: {
    checkout() {
      this.total = this.price * this.amount;
      this.save = (this.total * (10 - this.discount)) / 10;
      this.actual = this.total - this.save;
    },
  },
};
</script>

<style>
table {
  width: 600px;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

tr {
  border: 2px solid black;
}

td {
  height: 25px;
}
</style>